<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性</title>
	</head>
	<body>
		<div id="app">
		<!-- 需求: 将数据字母进行反转 abc 反转之后 cba
		 方法: 将数据拆分为数组,将数组进行反转,再将数组合并为字符串
		 函数:
		 1.split 拆分
		 2.reverse 反转数据
		 3.join('') 将数组转化为字符串
		 -->	
			<input type="text" v-model="msg" /><br/>
			数据展示:{{msg.split('').reverse().join('')}}<br />
			 <!-- 
				计算属性用法: 
				将需要计算的操作通过特定的方法先行计算之后将结果进行展现
				使用场景: 如果数据需要大量的计算 可以使用计算属性实现.
			 -->
			 计算属性:{{reverse}}
			  <hr />
			  <!-- 面试题: 计算属性与方法的区别
			  1.计算属性如果调用多次,则有缓存的机制 只计算一次.
			 	2.方法调用没有缓存机制,所以调用多次,则计算多次.
			 	如果一个计算重复调用时首选计算属性.
			 	 -->
			 <!-- 计算属性 -->
			 {{reverse}} {{reverse}}<br>
			 <!-- 将方法的计算结果,在该位置进行展现.所以需要return-->
			 {{reverseMe2()}}{{reverseMe2()}}{{reverseMe2()}}
			 <!-- <button @click="reverseMe">调用方法</button> -->
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					msg: '123456'
				},
				computed: {
					//定义一个方法,要求必须有返回值!!
					reverse(){
						console.log("计算属性执行")
						return this.msg.split('').reverse().join('')
					}
				},
				methods: {
					// reverseMe(){
					// 	console.log("方法执行")
					// 	this.msg = this.msg.split('').reverse().join('')
					// },
					reverseMe2(){
						console.log("方法执行")
						return this.msg.split('').reverse().join('')
					}
				}
			})
		</script>
	</body>
</html>
